<template>
  <div class="container">
    <router-view ></router-view>
    <div class="login-body" v-show="$route.meta.showfater">
          <div class="login-title">用户登录</div>
        <el-form :model="formData" :rules="rules" ref="formDataRef">
          <el-form-item label="" prop="account">
            <el-input v-model="formData.account" placeholder="请输入用户名" size="large" clearable >
            <template #prefix> 
              <span class="iconfont icon-account">  </span>
            </template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="formData.password" type="password" placeholder="请输入密码" size="large" clearable >
              <template #prefix> 
              <span class="iconfont icon-password">  </span>
            </template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="checkCode">
            <div class="check-code-panel">
              <el-input v-model="formData.checkCode" placeholder="请输入验证码" class="input-panel" />
            <img :src="checkCodeUrl" class="code-panel" @click="changeCheckCode">
            </div>
            <el-dialog title="登录失败" v-model="loginDialogVisible">
            <span>登录失败，请检查账号和密码是否正确</span>
           </el-dialog>
          </el-form-item>
          <el-form-item label="" >
            <el-checkbox v-model="formData.rememberMe" :label="true" clearable >记住密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-checkbox> 
            <div ><p >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;还没有账号?<a href="#" @click.prevent="toreg()" style="text-decoration: none;">点击注册</a></p></div>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" :style="{width:'100%'}" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>

    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import {ref} from 'vue';
import { useRouter } from 'vue-router';

  const router = useRouter();
const api = {
  checkCode:"api/checkCode"

}
const toreg = ()=>{
    router.push('/register')
}
const checkCodeUrl = ref(api.checkCode)
checkCodeUrl.value='http://localhost:8080/captcha';


function changeCheckCode  () {
  checkCodeUrl.value = "http://localhost:8080/captcha?" + new Date().getTime();
}
//表单
const formDataRef = ref();
const formData = ref({
  account :"",
  password:"",
  checkCode:""
});
 
const loginDialogVisible = ref(false);
const login = () =>{
  axios.get('http://localhost:8080/login?username=' 
  + formData.value.account 
  + "&password=" 
  + formData.value.password
  + "&verificationCode="
  + formData.value.checkCode,{
  withCredentials: true, 
})
  .then(response => {

    console.log('登录成功', response.data);
    if(response.data.code == 1){
      localStorage.setItem("token",response.data.data);
      localStorage.setItem("username",formData.value.account);
      router.push('/index/'+formData.value.account);

    }else{

    loginDialogVisible.value = true;

    formData.value.account = '';
    formData.value.password = '';
    formData.value.checkCode = '';
    }
  
   

  }).catch(error => {
    console.error('登录失败', error.response);
    if (error.response.status === 401) {
    
      showWarningMessage('密码错误');
    } else if (error.response.status === 403) {
     
      showWarningMessage('验证码错误');
    } else {
  
    }
  });
}

const rules ={
  account:[{
    required:true,
    message: "请输入用户名"
  }],
  password:[{
    required:true,
    message: "请输入密码"
  }],
  checkCode:[{
    required:true,
    message: "请输入验证码"
  }]
}


</script>

<style lang="scss" scoped>
$login-bg-image: '/image/首页.jpg';

.container{
  margin: 0;
    padding: 0;
    background-image: url('/image/首页.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: calc(100vh);
    .login-body{
      float: right;
      background-color: rgba($color: white, $alpha: 0.7);
      width: 350px;
      height: 350px;
      margin-right: 100px;
      margin-top: 100px;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 2px 2px 10px #ddd;
      .login-title{
        font-size: 20px;
        text-align: center;
        margin-bottom: 10px;
      }
      .check-code-panel{
        display: flex;

        .input-panel{
          flex: 1 ;
          margin-right: 5px;
         }
        .code-panel{
          
            cursor: pointer;//指定鼠标悬停在该元素上时的光标样式为手型
         
        }
      }
  }
}
</style>